<template>
  <div id="detail">
    <detail-nav-bar ref="navBar" @navClick="navClick"/>
    <scroll class="scroll" ref="scroll" :probeType="3" @scrollEvent="contentScroll">
      <detail-swiper :images="topImages"/>
      <detail-base-info :goods="goods"/>
      <detail-shop-info :shop="shop"/>
      <detail-image-info :detailInfo="detailInfo" @imageLoad="infoLoad"/>
      <detail-params-info ref="params" :itemParams="itemParams"/>
      <detail-comment-info ref="comment" :detailComment="detailComment"/>
      <goods-list ref="recommend" :goods="recommends"/>
    </scroll>
    <detail-bottom-bar @addCart="addToCart"/>
    <back-top @click.native="backClick" v-show="isShowBack"/>
  </div>
</template>

<script>
  import DetailNavBar from "./childComps/DetailNavBar"
  import DetailSwiper from "./childComps/DetailSwiper"
  import DetailBaseInfo from "./childComps/DetailBaseInfo"
  import DetailShopInfo from "./childComps/DetailShopInfo"
  import DetailImageInfo from "./childComps/DetailImageInfo"
  import DetailParamsInfo from "./childComps/DetailParamsInfo"
  import DetailCommentInfo from "./childComps/DetailCommentInfo"
  import DetailBottomBar from "./childComps/DetailBottomBar"

  import Scroll from "components/common/scroll/Scroll"
  import GoodsList from "components/content/goods/GoodsList"

  import {getDetailData, Goods, Shop, getRecommend} from "network/detail"

  import {debounce} from "common/utils"
  import {backTopMixin} from 'common/mixin'

  export default {
    name: "Detail",
    components: {
      DetailNavBar,
      DetailSwiper,
      DetailBaseInfo,
      DetailShopInfo,
      DetailImageInfo,
      DetailParamsInfo,
      DetailCommentInfo,
      GoodsList,
      Scroll,
      DetailBottomBar
    },
    mixins: [backTopMixin],
    data(){
      return {
        iid: null,
        topImages: [],
        goods: {},
        shop: {},
        detailInfo: {},
        itemParams: {},
        detailComment: {},
        recommends: [],
        newRefresh: null,
        navTopYs: [],
        getNavTopY: null,
        currentIndex: 0
      }
    },
    created() {
      this.iid = this.$route.query.iid
      getDetailData(this.iid).then(res => {
        const data = res.result
        this.topImages = data.itemInfo.topImages
        this.goods = new Goods(data.itemInfo, data.columns, data.shopInfo.services)
        this.shop = new Shop(data.shopInfo)
        this.detailInfo = data.detailInfo
        this.itemParams = data.itemParams
        if(data.rate.cRate !== 0){
          this.detailComment = data.rate.list[0]
        }
      })

      getRecommend().then(res => {
        this.recommends = res.data.list
      })

      this.getNavTopY = debounce(() => {
        this.navTopYs = []
        this.navTopYs.push(0)
        this.$refs.params && this.navTopYs.push(this.$refs.params.$el.offsetTop)
        this.$refs.comment && this.navTopYs.push(this.$refs.comment.$el.offsetTop)
        this.$refs.recommend && this.navTopYs.push(this.$refs.recommend.$el.offsetTop)
        this.navTopYs.push(Number.MAX_VALUE)
      }, 100)
    },
    mounted() {
      this.newRefresh = debounce(this.$refs.scroll.refresh, 100)
      this.$bus.$on('detailImgLoad', () => {
        this.newRefresh()
      })
    },
    methods: {
      infoLoad(){
        //this.$refs.scroll.refresh()
        this.newRefresh()
        this.getNavTopY()
      },
      navClick(index){
        this.$refs.scroll.scrollTo(0, -this.navTopYs[index], 200)
      },
      contentScroll(pos){
        this.isShowBack = (-pos.y) > 1000
        for(let i = 0; i < this.navTopYs.length - 1; i++){
          if(this.currentIndex !== i && (-pos.y >= this.navTopYs[i] && -pos.y < this.navTopYs[i+1])){
            this.currentIndex = i
            this.$refs.navBar.currentIndex = this.currentIndex
          }
        }
      },
      addToCart(){
        const product = {}
        product.iid = this.iid
        product.image = this.topImages[0]
        product.title = this.goods.title
        product.desc = this.goods.desc
        product.price = this.goods.price
        this.$store.dispatch('addCart', product).then(res => {
          /*this.isShow = true
          this.message = res
          setTimeout(() => {
            this.isShow = false
            this.message = ''
          }, 1500)*/

          this.$toast.show('添加成功')
        })
      }
    }
  }
</script>

<style scoped>
#detail{
  height: 100vh;
  position: relative;
  z-index: 100;
  background: #fff;
}
.scroll{
  overflow: hidden;
  height: calc(100% - 94px);
}
</style>